<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	</meta>
	<title>个人中心</title>
	<link rel="stylesheet" type="text/css" href="../css/index.css" />

	<script src="../js/jquery-3.6.0.js"></script>
	<script src="../js/jquery-form.js" type="text/javascript"></script>
	<script src="../js/template.js"></script>
	<script src="/layer/layer.js"></script>
	<script>
		$(function () {
			$("#main").load("main.html?t=" + new Date().getTime());
			$(".menu").click(function (e) {
				e.preventDefault();
				$("#main").load($(this).attr("href") + "?t=" + new Date().getTime());
			});
		});
	</script>
	<script id="loginfoTpl" type="text/html">
	{{user.account}}！您好，欢迎您来到购物！[<a href="../user?opr=logout" class="reg">安全退出</a>]
</script>
</head>

<body class="index">
	<div class="ucenter container">
		<div class="header">
			<h1 class="logo">
				<a title="" style="background: url(../images/logo.png)" href="../">电子商务平台</a>
			</h1>
			<ul class="shortcut">
				<li class="first"><a href="../ucenter/">个人中心</a></li>
				<li><a href="javascript:$('#main').load('order_list.html');">我的订单</a></li>
			</ul>
			<p class="loginfo" id="loginfo">

			</p>
		</div>
		<div class="navbar">
			<ul>
				<li><a href="/">首页</a></li>
				<li id="catagorybar">
					
				</li>
			</ul>
			<div class="mycart">
				<dl>
					<dt>
						<a href="/cart?opr=list">购物车<b name="mycart_nums" id="mycart_nums">0</b>件
						</a>
					</dt>
					<dd>
						<a href="/cart?opr=list">去结算</a>
					</dd>
				</dl>
				<!--购物车浮动div 开始-->
				<div class="shopping" id="div_mycart" style="display: none;">
					<dl class="cartlist" id="shopcarDiv">
					</dl>
				</div>
				<script>
				</script>
			</div>
		</div>
		<div class="searchbar">
			<div class="allsort">
				<div id="allcatagory">
                    <!-- <a href="javascript:void(0);">全部商品分类</a>
                    <select name="categoryId" style="width: 100px;text-align: center"
                        onchange="javascript:location.href='/goods?opr=list&cid='+this.value">
                        <option value="0">请选择</option>
                        <c:forEach items="${categories}" var="category">
                            <option value="${category.id}">${category.categoryName}</option>
                        </c:forEach>
                    </select> -->
                </div>
				 <!--总的商品分类-开始-->
				 <ul class="sortlist" id='div_allsort' style='display:none'>
                    <li>
                        <h2>
                            <c:forEach items="${categoryTags}" var="categoryTag">
                                <a href="">${categoryTag.categoryName}</a>
                            </c:forEach>
                        </h2>
                    </li>
                </ul>
			</div>

			<div class="searchbox">
				<form method='get' action='/search'>
					<input class="text" type="text" name='q' autocomplete="off" placeholder="输入关键字..." /> <input
						class="btn" type="submit" value="商品搜索" />
				</form>
			</div>
			<div class="hotwords">
				热门搜索：<a href="/search?q=Java">Java</a>
			</div>
		</div>
		<div class="wrapper clearfix">
			<div class="sidebar f_l">
				<img src="../images/front/ucenter/ucenter.gif" width="180" height="40" />
				<div class="box">
					<div class="title">
						<h2>交易记录</h2>
					</div>
					<div class="cont">
						<ul class="list">
							<li><a href="order_list.html" class="menu">我的订单</a></li>
						</ul>
					</div>
				</div>
				<div class="box">
					<div class="title">
						<h2 class='bg5'>个人设置</h2>
					</div>
					<div class="cont">
						<ul class="list">
							<li><a href="address_list.html" class="menu">地址管理</a></li>
						</ul>
						<ul class="list">
							<li><a href="user_avatar.html" class="menu">修改头像</a></li>
						</ul>
						<ul class="list">
							<li><a href="password_update.html" class="menu">修改密码</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="main f_r" id="main">

			</div>
		</div>
		<div class="help m_10">
			<div class="cont clearfix">
				<dl>
					<dt>
						<a href="">购物指南</a>
					</dt>
					<dd>
						<a href="">订单状态</a>
					</dd>
					<dd>
						<a href="">购物流程</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="">支付帮助</a>
					</dt>
					<dd>
						<a href="">支付帮助</a>
					</dd>
					<dd>
						<a href="">在线支付</a>
					</dd>
					<dd>
						<a href="">货到付款</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="">配送帮助</a>
					</dt>
					<dd>
						<a href="">EMS/邮政普包</a>
					</dd>
					<dd>
						<a href="">商品验货与签收</a>
					</dd>
					<dd>
						<a href="">配送范围及运费</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="">售后服务</a>
					</dt>
					<dd>
						<a href="">售后服务</a>
					</dd>
					<dd>
						<a href="">发票制度</a>
					</dd>
					<dd>
						<a href="">退货说明</a>
					</dd>
					<dd>
						<a href="">换货说明</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="">帮助信息</a>
					</dt>
					<dd>
						<a href="">友情链接</a>
					</dd>
					<dd>
						<a href="">联系客服</a>
					</dd>
					<dd>
						<a href="">找回密码</a>
					</dd>
					<dd>
						<a href="">关于我们</a>
					</dd>
				</dl>
			</div>
		</div>
		<div class="footer">
			<p class="links">
				<a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a href="">购买流程</a>|<a href="">如何付款</a>|<a
					href="">联系我们</a>|<a href="">合作提案</a>
			</p>
			Copyright © 2015-2022 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
		</div>
	</div>
	<script>
		function details(id) {
			$('#main').load('order_view.html');
			$.ajax({
				type: "get",
				url: "/order",
				data: "opr=details&oid=" + id,
				dataType: "json",
				beforeSend: function (r) {
					//加载层-默认风格
					layer.load();
				},
				success: function (result) {
					console.log(result);
					$("#orderNo").text(result[0].ordersId);
					$("#orderTime").text(result[0].times);
					$("#orderid").val(result[0].id);
					// $("#status").text(result[0].state);
					if (result[0].state == 1) {
						$("#status").text("待付款");
						$("#confirmOrder").hide();
					} else if (result[0].state == 2) {
						$("#status").text("待发货");
						$("#delOrder").hide();
					} else if (result[0].state == 3) {
						$("#status").text("已发货");
					} else if (result[0].state == 4) {
						$("#status").text("已收货");
					} else if (result[0].state == 5) {
						$("#status").text("退货中");
					} else if (result[0].state == 6) {
						$("#status").text("同意退货");
					} else if (result[0].state == 7) {
						$("#status").text("不同意退货");
					} else if (result[0].state == 8) {
						$("#status").text("退货成功");
					}


					$("#accept").text(result[0].conSingnee);
					$("#address").text(result[0].address);
					$("#telphone").text(result[0].tel);
					if (result[0].payMethod == 1) {
						$("#paytype").text("支付宝");
					} else if (result[0].payMethod == 2) {
						$("#paytype").text("微信");
					} else {
						$("#paytype").text("货到付款");
					}
					$("#order_amount").text(result[0].totalMoney);


					let de = new Array();
					for (var i = 0; i < result[1].length; i++) {
						let list = new Array();
						list["bookName"] = result[1][i]["goods"][0]["bookName"];
						list["img"] = result[1][i]["goods"][0]["img"];
						list["price"] = result[1][i]["price"];
						list["bookNums"] = result[1][i]["bookNums"];
						list["totalprice"] = (result[1][i]["price"] * result[1][i]["bookNums"]).toFixed(2);
						de[i] = list;
					}
					console.log(de)
					let html = template('tpl', {
						details: de
					});
					$("#orderItems").append(html);
				},
				complete: function (XMLHttpRequest, textStatus) {
					// alert('远程调用成功，状态文本值：'+textStatus);
					layer.closeAll('loading');
				},
				error: function () {
					layer.msg('系统繁忙，请稍后再试', { icon: 2 });
				}
			})
		}
	</script>

	<script id="tpl" type="text/html">
	{{each details as detail}}
   <tr>
	   <td><img src="/{{detail.img}}" style="width: 50px;height:50px;"> </td>
	   <td>{{detail.bookName}}</td>
	   <td>{{detail.price}}</td>
	   <td>{{detail.bookNums}}</td>
	   <td>
		{{detail.totalprice}}
	   </td>
	   </tr>
   {{/each}} 
   </script>
   <script>
	$(function () {
		$("#mycart_nums").text(localStorage.getItem("mycart_count"));
		$("#catagorybar").append(localStorage.getItem("catagorybar"));
		$("#allcatagory").append(localStorage.getItem("allcatagory"))
	})
</script>

</body>

</html>